<template>
  <!-- Vue3组件不在需要根标签 -->
  <p class="title">App</p>

  <p :class="color">小陈老师真帅</p>
  <p
    :style="{
      color,
    }"
  >
    小陈老师真帅
  </p>
  <p class="sub-title">小陈老师真帅</p>
  <p class="p">小陈老师真帅</p>
  <button @click="color = color === 'green' ? 'purple' : 'green'">按钮</button>

  <div class="container">
    <Child />
  </div>
</template>

<script lang="ts">
/*
  静态样式：
    style
    class

  css预处理器
    less  npm i less -D
    sass  npm i sass -D
    stylus npm i stylus -D

  动态样式：
    动态class
      :class="xxx"
      :class="{
        xxx: true,
        yyy: false,
      }"
      :class="[xxx, yyy]"
    动态style
      :style="{ }"
    v-bind绑定动态的值
      .xxx{
        color: v-bind(xxx)
      }

  scoped：
    作用：让样式只对当前组件生效
      (也会影响子组件根标签，如果子组件没有根标签就不会影响了)
    原理：
      1. 给当前组件所有元素添加一个自定义属性 data-v-7a7a37b1
      2. 给当前组件所有样式添加一个属性选择器 [data-v-7a7a37b1]

  父组件如何修改子组件样式？
    1. 深度样式选择器
      :deep()
    2. 写一个新的style标签，不加scoped
      问题：会影响所有组件
*/
import Child from "./Child.vue";

export default {
  name: "App",
  data() {
    return {
      color: "purple",
    };
  },
  components: {
    Child,
  },
};
</script>

<style scoped lang="less">
.p {
  --primary-color: yellow;
}
.p {
  color: var(--primary-color);
}
.title {
  color: pink;
}

.purple {
  color: purple;
}
.green {
  color: green;
}

.sub-title {
  // 使用js中数据
  color: v-bind(color);
}

// 深度样式选择器: 父组件修改子组件样式
.container :deep(.child-title) {
  color: blue;
}
</style>

<style lang="less">
.child-title {
  font-size: 30px;
}
</style>
